<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" top="30vh" @close.native="cancel" :close-on-click-modal="false">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="协作者：" prop="list">
          <el-select style="width:100%" multiple @change="changeFun" v-model="form.peopleList" filterable>
            <el-option v-for="(item,index) in peopleArr" :key="index" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="已选择：">
          <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
            {{tag.name}}
          </el-tag>
        </el-form-item> -->
        <el-form-item label="权限：" prop="jurisdiction">
          <el-radio-group v-model="form.jurisdiction" style="position: relative; top:3px">
            <el-radio :label="0">仅查看</el-radio>
            <el-radio :label="1">编辑</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        jurisdiction: '',
        peopleList: []
      },
      peopleArr: [{
        name: 1111,
        id: 1111
      },
      {
        name: 2222,
        id: 2222
      },
      {
        name: 33333,
        id: 3333
      },
      {
        name: 2222,
        id: 2222
      },
      {
        name: 4,
        id: 4
      },
      {
        name: 5,
        id: 5
      },
      {
        name: 6,
        id: 6
      }
      ],
      rules: {
      },
      title: '',
    }
  },
  methods: {
    changeFun(item) {

      console.log('%c [  ]-61', 'font-size:13px; background:pink; color:#bf2c9f;', item)

    },
    show(obj) {
      this.dialogVisible = true
      this.title = obj.title
      if (obj.data) {
        this.form = Object.assign(this.form, obj.data)
      }
    },
    submitForm() {
      // this.$refs['ruleForm'].validate(valid => {
      //   if (valid) {
      //     if (this.form.id) {
      //       updateFeedback(this.form).then(() => {
      //         this.cancel()
      //       })
      //     } else {
      //       addFeedback(this.form).then(() => {
      //         this.cancel()
      //       })
      //     }
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    },
    cancel() {
      this.form = this.$options.data().form
      this.$refs.ruleForm.clearValidate()
      this.dialogVisible = false
      this.$emit('close')
    },

  }
}
</script>

<style lang="less" scoped>
</style>